<template>
  <div class="player">
    <audio
      autoplay
      :src="`https://music.163.com/song/media/outer/url?id=${playMusic.id}.mp3`"
      @timeupdate="timeupdate"
      @play="playState = true"
      @pause="playState = false"
      @ended="$emit('changeMusic', 'next')"
      ref="player"
    ></audio>
    <div class="minibar">
      <img
        @click="showfull = true"
        :src="playMusic.picUrl"
        :style="{ 'animation-play-state': playState ? 'running' : 'paused' }"
      />
      <h5 @click="showfull = true">
        <span
          :style="{ 'animation-play-state': playState ? 'running' : 'paused' }"
        >
          {{ playMusic.name }}-<b
            v-for="artist in playMusic.song.artists"
            :key="artist.id"
            >{{ artist.name }}</b
          >
        </span>
      </h5>
      <i class="playbtn" @click="playState = !playState">
        <i
          :class="['fa', { 'fa-play': !playState }, { 'fa-pause': playState }]"
          aria-hidden="true"
        ></i>
        <canvas class="canvasbox" ref="circleCavans" width="50" height="50"></canvas>
      </i>
      <!-- <button>暂停/播放</button> -->
      <div class="fullscreen">
        <transition
          enter-active-class="animate__animated animate__fadeIn"
          leave-active-class="animate__animated animate__fadeOut"
        >
          <full-screen
            v-if="showfull"
            @hidefull="showfull = $event"
            @changeMusic="$emit('changeMusic', $event)"
            @changeTime="changeTime"
            @playpause="playState = !playState"
            :playMusic="playMusic"
            :currentTime="currentTime"
            :duration="duration"
            :playState="playState"
            :playList="playList"
          ></full-screen>
        </transition>
      </div>
    </div>
  </div>
</template>
<script>
import FullScreen from "@/components/FullScreen.vue";
export default {
  props: {
    playMusic: {
      type: Object,
      default: null,
    },
    playList: Array,
  },
  data() {
    return {
      cxt: null,
      playState: true,
      showfull: false,
      currentTime: 0,
      duration: 0,
    };
  },
  mounted() {
    this.cxt = this.$refs.circleCavans.getContext("2d");
  },
  methods: {
    changeTime(event) {
      this.$refs.player.currentTime = event;
    },
    timeupdate(e) {
      let ctime = e.target.currentTime;
      let totalTime = e.target.duration;
      this.drawCircle(ctime, totalTime);
      this.currentTime = ctime;
      this.duration = totalTime;
    },
    drawCircle(ctime, total) {
      this.cxt.clearRect(0, 0, 50, 50);
      this.cxt.beginPath();
      this.cxt.arc(25, 25, 20, 0, 2 * Math.PI);
      this.cxt.strokeStyle = "#c8b9b8";
      this.cxt.lineWidth = 5;
      this.cxt.stroke();
      this.cxt.closePath();
      let rdu = (ctime / total) * 2 * Math.PI;
      this.cxt.beginPath();
      this.cxt.strokeStyle = "#12bd73";
      this.cxt.lineWidth = 5;
      this.cxt.arc(25, 25, 20, 0, rdu);
      this.cxt.stroke();
      this.cxt.closePath();
    },
  },
  components: {
    FullScreen,
  },
  watch: {
    playState(newValue) {
      if (newValue) {
        this.$refs.player.play();
      } else {
        this.$refs.player.pause();
      }
    },
  },
};
</script>
<style scoped lang="less">
.canvasbox{
   transform: rotate(270deg);}
.player {
  position: sticky;
  padding:0;
  bottom: 55px;
 margin: 0 9px;
  z-index: 9;
  background: #eedfcc url(../static/img/bg.jpg) no-repeat center top;
  color: white;
  opacity: .96;
  border-radius:0 25px 25px 0;
  .minibar {
    padding: 5px;
    display: flex;
    h5 {
      flex: 1;
      overflow: hidden;
      span {
        line-height: 50px;
        display: inline-block;
        white-space: nowrap;
        animation: gun 10s linear infinite;
      }
    }
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      animation: roll 2s linear infinite;
    }
    i {
      &.playbtn {
        color: #ffffff99;
        position: relative;
        .fa {
          left: 50%;
          top: 50%;
          text-align: center;
          transform: translate(-50%, -50%);
          width: 20px;
          height: 20px;
          font-size: 20px;
          position: absolute;
        }
      }
    }
  }
}
@keyframes roll {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes gun {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
</style>